<template>
  <div class="container">
    <div class="contentWarp">
      <!-- 顶部菜单组件 -->
      <headerCommon></headerCommon>
      <div class="contentInfoBox">
        <!-- 轮播 -->
        <div class="scrollBox">
          <el-carousel trigger="click" :interval="3000">
            <el-carousel-item v-for="(item, index) in scrollImgListL" :key="index">
              <img :src="item.imgUrl" height="560" />
            </el-carousel-item>
          </el-carousel>
        </div>
        <!-- 统计 -->
        <div class="infoBox">
          <ul class="tongjiMain">
            <li>
              <img :src="require('@/assets/home/IndexTop01.svg')" alt="" />
              <div class="pinpai">
                <h4>三部委</h4>
                <span>联合推荐品牌</span>
              </div>
            </li>
            <li>
              <img :src="require('@/assets/home/IndexTop01.svg')" alt="" />
              <div class="pinpai">
                <h4>三部委</h4>
                <span>联合推荐品牌</span>
              </div>
            </li>
            <li>
              <img :src="require('@/assets/home/IndexTop03.svg')" alt="" class="signRy" />
            </li>
            <li>
              <img :src="require('@/assets/home/IndexTop01.svg')" alt="" />
              <div class="pinpai">
                <h4>三部委</h4>
                <span>联合推荐品牌</span>
              </div>
            </li>
            <li>
              <img :src="require('@/assets/home/IndexTop01.svg')" alt="" />
              <div class="pinpai">
                <h4>三部委</h4>
                <span>联合推荐品牌</span>
              </div>
            </li>
          </ul>
        </div>
        <!-- 正文 -->
        <div class="mainWarp">
          <div class="content-item w1200">
            <div class="titleInfo">专业适老化智能终端<sub> *均支持API数据对接</sub></div>
            <p>心念您拥有领先的智能传感核心技术，秉承适老化的创新设计理念，面向全龄段长者的多个生活场景自主研发设计的多样化适老智能产品系列，是智慧健康养老生态数据的重要入口</p>
            <div class="contentWarp">
              <div class="itemDiv">
                <img :src="require('@/assets/home/ZD01.svg')" alt="" />
                <span>全龄段</span>
              </div>
              <div class="itemDiv">
                <img :src="require('@/assets/home/ZD02.svg')" alt="" />
                <span>全龄段</span>
              </div>
              <div class="itemDiv">
                <img :src="require('@/assets/home/ZD03.svg')" alt="" />
                <span>全龄段</span>
              </div>
            </div>
          </div>
          <!-- 床位系列及产品 -->
          <div class="mainAllproduct w1200">
            <ul class="itemXilie">
              <li v-for="(item, index) in xilieList" :key="index">
                <div class="xilieInfo" @click="linkItem(index)">
                  <i class="el-icon-user"></i>
                  <span :class="[index == currentIndex ? 'currentStyle' : '']">{{ item.name }}</span>
                </div>
              </li>
              <li>
                <div class="xilieInfo">
                  <i class="el-icon-user"></i>
                  <span>点击了解更多</span>
                </div>
              </li>
            </ul>
            <div class="bgHomeText">
              <div class="itemShow" v-show="currentIndex == 0">
                <h3>家庭养老床位套装</h3>
                <p>根据各地区家庭养老床位项目智能化产品改造需求清单专门打造的适老化远程监测产品套装,助力服务机构“将养老床位建在长者家里”</p>
              </div>
              <div class="itemShow" v-show="currentIndex == 1">
                <h3>长者智能穿戴系列</h3>
                <p>专门针对长者在室内场景设计的可独立通讯、多点位无线部署的报警产品套装。为独居、空巢长者构建居室内360°无死角安全防线</p>
              </div>
              <div class="itemShow" v-show="currentIndex == 2">
                <h3>居家安全报警系列</h3>
                <p>专门针对长者在室内场景设计的可独立通讯、多点位无线部署的报警产品套装。为独居、空巢长者构建居室内360°无死角安全防线</p>
              </div>
              <div class="itemShow" v-show="currentIndex == 3">
                <h3>夜间风险防控系列</h3>
                <p>针对长者夜起离床超时未归、生命体征监测等异常实时监测并处理，助力服务机构实现一个员工、一台电脑,有效防控长者夜间风险,“可视化”管理全域长者</p>
              </div>
              <div class="itemShow" v-show="currentIndex == 4">
                <h3>健康医疗监测系列</h3>
                <p>通过专业医疗认证智能产品，远程监测长者各项健康数据，助力服务机构打造多元化“医养结合”服务新模式</p>
              </div>
            </div>
            <!-- 产品介绍 -->
            <ul class="productBox">
              <li v-for="i in 4" v-show="currentIndex == 0">
                <div class="itemBox">
                  <img :src="require('@/assets/home/SCO04.png')" alt="" width="140" height="140" />
                  <div class="productInduce">
                    <h4>HA04</h4>
                    <p>燃气警报器</p>
                  </div>
                </div>
              </li>
              <li v-for="i in 4" v-show="currentIndex == 1">
                <div class="itemBox">
                  <img :src="require('@/assets/home/CD_01.png')" alt="" width="140" height="140" />
                  <div class="productInduce">
                    <h4>X8</h4>
                    <p>4g全网通旗舰机型</p>
                  </div>
                </div>
              </li>
              <li v-for="i in 4" v-show="currentIndex == 2">
                <div class="itemBox">
                  <img :src="require('@/assets/home/BJ_01.png')" alt="" width="140" height="140" />
                  <div class="productInduce">
                    <h4>HA01</h4>
                    <p>一键呼叫按钮(手环)</p>
                  </div>
                </div>
              </li>
              <li v-for="i in 4" v-show="currentIndex == 3">
                <div class="itemBox">
                  <img :src="require('@/assets/home/SCO08.png')" alt="" width="140" height="140" />
                  <div class="productInduce">
                    <h4>BW01</h4>
                    <p>健康睡眠监测仪</p>
                  </div>
                </div>
              </li>
              <li v-for="i in 4" v-show="currentIndex == 4">
                <div class="itemBox">
                  <img :src="require('@/assets/home/JC_01.png')" alt="" width="140" height="140" />
                  <div class="productInduce">
                    <h4>HA01</h4>
                    <p>远程智护血压计</p>
                  </div>
                </div>
              </li>
            </ul>
          </div>
          <!-- 功能介绍 -->
          <div class="maxWarp">
            <div class="maxBoxContent">
              <div class="gnContent w1200">
                <h3>管理平台</h3>
                <p>核心功能简介</p>
              </div>
              <div class="hexinContent">
                <h2>智慧康养数字化管理平台</h2>
                <span>七大实用管理子系统,十四项运营功能模块</span>
                <a>查看更多></a>
              </div>
            </div>
          </div>
          <!-- 解决方案 -->
          <div class="solutionContent">
            <div class="w1200">
              <div class="solutionTitle">
                <h3>解决方案</h3>
                <div class="solutionText">
                  <p>云平台+应用+硬件</p>
                  <a>点击了解更多></a>
                </div>
              </div>
              <ul class="goodsBox">
                <li v-for="i in 6">
                  <div class="goodSitem">
                    <div class="goodSitem-top" @click="linkTo(item)">
                      <img :src="require('@/assets/home/JJFA01.png')" alt width="230" height="200" />
                      <p class="title">智慧养老解决方案</p>
                      <span class="desc">
                        融合健康养老产业运营理念，助力服务机构快速数字化转型
                      </span>
                    </div>
                    <div class="addShopcar"></div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { onMounted, reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import headerCommon from '@/components/common/headerCommon'
export default {
  components: {
    headerCommon,
  },
  setup() {
    const router = useRouter()
    const state = reactive({
      currentIndex: '0',
      scrollImgListL: [
        {
          imgUrl: require('@/assets/home/banner001.jpg'),
        },
        {
          imgUrl: require('@/assets/home/Banner8.jpg'),
        },
        {
          imgUrl: require('@/assets/home/chenghao.png'),
        },
        {
          imgUrl: require('@/assets/home/X5banner.png'),
        },
      ],
      xilieList: [
        {
          name: '家庭养老床位系列',
        },
        {
          name: '长者智能穿戴系列',
        },
        {
          name: '居家安全报警系列',
        },
        {
          name: '夜间风险防控系列',
        },
        {
          name: '健康医疗监测系列',
        },
      ],
    })
    const linkItem = (index) => {
      state.currentIndex = index
    }
    // 获取首页数据
    onMounted(() => {})

    return {
      ...toRefs(state),
      linkItem,
    }
  },
}
</script>
<style scoped lang="less">
.contentInfoBox {
  overflow: hidden;
}
.scrollBox {
  :deep(.el-carousel__container) {
    height: 560px;
  }
  :deep(.el-carousel__indicators--horizontal) {
    bottom: 28px;
  }
  > img {
    height: 560px;
  }
}
.infoBox {
  background: #f0f0f0;
  font-size: 14px;
  display: flex;
  height: 200px;
  align-items: center;
  .tongjiMain {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    > li {
      display: flex;
      align-items: center;
      .pinpai {
        margin-left: 6px;
        > h4 {
          font-size: 26px;
          font-family: PingFangSC-Regular, PingFang SC;
        }
      }
      .signRy {
        margin-top: -20px;
        z-index: 1;
      }
    }
  }
}
.mainWarp {
  .content-item {
    padding: 40px 0;
    > .titleInfo {
      font-style: normal;
      font-size: 26px;
      font-family: PingFangSC-Regular, PingFang SC;
      padding: 5px 0;
      > sub {
        color: #f00;
      }
    }
    > p {
      font-size: 16px;
      font-family: PingFangSC-Regular, PingFang SC;
      line-height: 20px;
    }
    .contentWarp {
      display: flex;
      justify-content: space-around;
      padding: 60px 0;
      .itemDiv {
        display: flex;
        flex-direction: column;
        text-align: center;
      }
    }
  }
  .mainAllproduct {
    display: flex;
    padding: 20px 10px;
    .itemXilie {
      width: 250px;
      .xilieInfo {
        line-height: 60px;
        .currentStyle {
          color: #f00;
        }
      }
    }
    .bgHomeText {
      background: url(./../../assets/home/bgHome1.png) no-repeat;
      width: 390px;
      height: 500px;
      background-size: 100% 100%;
      margin-left: -45px;
      padding: 200px 80px;
      color: #ffd792;
      margin-top: -12px;
    }
    .productBox {
      display: flex;
      flex-wrap: wrap;
      > li {
        height: 140px;
        white-space: nowrap;
        .itemBox {
          display: flex;
          align-items: center;
        }
      }
    }
  }
  .maxWarp {
    background: #f9f9f9;
    .maxBoxContent {
      background: url('./../../assets/home/cteBG.png') no-repeat;
      height: 1300px;
      background-size: 100% auto;
      background-position: center;
      margin: 0 auto;
      .gnContent {
        padding-top: 120px;
      }
    }
    .hexinContent {
      margin-top: 550px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
  .goodsBox {
    flex-wrap: wrap;
    display: flex;
    > li {
      padding: 16px;
      background: #ffffff;
      box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.1);
      opacity: 1;
      border-radius: 15px;
      width: 272px;
      margin: 8px;
      transition: all 0.3s;
      box-sizing: border-box;
      &:hover {
        margin-top: -3px;
        box-shadow: 4px 4px 10px #e8e8e8;
      }
      &:last-of-type {
        margin-right: 0;
      }
      .goodSitem {
        .goodSitem-top {
          cursor: pointer;
        }
        .title {
          font-size: 16px;
          font-family: var(--font-family);
          font-weight: 500;
          line-height: 25px;
          color: #383938;
        }
        .desc {
          display: inline-block;
          font-size: 14px;
          font-family: var(--font-family);
          font-weight: 400;
          color: #666;
        }
        .addShopcar {
          margin-top: 20px;
          > button {
            font-size: 8px;
            font-family: Proxima Nova;
            font-weight: 600;
            background: #000;
            padding: 6px 10px;
            color: #ffffff;
            border-radius: 18px;
          }
          .salePrice {
            display: flex;
            justify-content: space-between;
            align-items: center;
            > del {
              font-size: 16px;
              font-family: var(--font-family);
              font-weight: 400;
              line-height: 20px;
              color: #9fa3a8;
            }
            > span {
              font-size: 20px;
              font-family: var(--font-family);
              font-weight: 400;
              margin-left: 8px;
              line-height: 20px;
              color: #e4393c;
            }
          }
        }
      }
    }
  }
}
</style>
